<script setup>
import {ref, getCurrentInstance, reactive, onMounted, computed} from "vue";
import PermissionApi from "@/api/PermissionApi.js";
const {proxy} = getCurrentInstance()
import {ElMessage, ElMessageBox} from "element-plus"
import VideoCategoryApi from "@/api/VideoCategoryApi.js";

const state = reactive({
  permissionList:[],
  dialog:{
    addOrUpdateDialog:false
  },
  permissionInfo:{
    id:null,
    name:null,
    code:null,
    children:null,
    parentId:null,
    parentName:null
  },
  isAdd:true
})

const getPermissionList = ()=>{
  PermissionApi.getPermissionList().then(res=>{
    state.permissionList = res.data
  })
}
onMounted(() => {
  getPermissionList()
})

// 添加或修改
const openAddOrUpdateDialog = (isAdd, permission) => {
  state.dialog.addOrUpdateDialog = true
  state.isAdd = isAdd
  if (isAdd){
    state.permissionInfo = {
      id:null,
      name:null,
      code:null,
      children:null,
      parentId:-1
    }
    if (permission){
      state.permissionInfo.parentId = permission.id
      state.permissionInfo.parentName = permission.name
    }
  }else {
    PermissionApi.getPermissionInfo(permission.id).then(res=>{
      state.permissionInfo = res.data
    })
  }
}

//添加，修改保存操作
const saveOrUpdatePermission = () => {
  const operation=state.isAdd?PermissionApi.addPermission:PermissionApi.updatePermission
  operation(state.permissionInfo).then(res=>{
    if (!res.flag){
      ElMessage.error(res.message)
      return
    }
    ElMessage.success(state.isAdd?'添加成功':'修改成功')
    state.dialog.addOrUpdateDialog = false
    getPermissionList()
  })
}

//删除
const deletePermission = (permissionId)=>{
  ElMessageBox.confirm(
      '确定删除该权限吗（同时会删除该分类下的所有权限）?',
      '删除权限',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        PermissionApi.deletePermission(permissionId).then(res=>{
          if (!res.flag){
            ElMessage.error(res.message)
            return
          }
          ElMessage.success("删除成功")
          getPermissionList()
        })
      })
}

</script>
<template>
  <el-card>
    <el-button type="primary" @click="openAddOrUpdateDialog(true,null)">
      新增权限
      <el-icon size="small" class="el-icon--right">
        <Plus/>
      </el-icon>
    </el-button>
  </el-card>
  <el-table
      :data="state.permissionList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
  >
    <el-table-column prop="name"  label="权限名称"/>

    <el-table-column align="center" prop="code" label="权限编码">
      <template #default="scope">
        <el-tag effect="dark" type="primary">{{ scope.row.code }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-space>
          <el-button type="primary"  :disabled="scope.row.parentId!==-1" size="small" text
                     @click="openAddOrUpdateDialog(true,scope.row)">添加
          </el-button>
          <el-button type="warning" size="small" text @click="openAddOrUpdateDialog(false,scope.row)">修改
          </el-button>
          <el-button type="danger" size="small" text @click="deletePermission(scope.row.id)">删除
          </el-button>
        </el-space>
      </template>
    </el-table-column>
  </el-table>
  <!--  添加、修改对话框-->
  <el-dialog style="border-radius: 8px" v-model="state.dialog.addOrUpdateDialog" width="35%" center
             :title="state.isAdd?'添加权限':`修改权限`">
    <el-form :model="state.permissionInfo" label-width="80px">
      <el-form-item label="父级权限" v-if="state.permissionInfo.parentName">
        <el-input  disabled  v-model="state.permissionInfo.parentName"/>
      </el-form-item>
      <el-form-item label="权限名称">
        <el-input v-model="state.permissionInfo.name"/>
      </el-form-item>
      <el-form-item label="权限标识">
        <el-input v-model="state.permissionInfo.code"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.dialog.addOrUpdateDialog =false">取消</el-button>
        <el-button type="primary" @click="saveOrUpdatePermission">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style scoped>

</style>